<template>
	<div id="productshow" class="_page">
		<span class="back iconfont icon-backer back-1" @click="$router.go(-1)"></span>
		<swiper :bannerlist = "bannerlist"></swiper>
		<div class="hot npcn">
			<img v-lazy="main.hot" alt="" class="width_img " @click="linkToPage('10')">
		</div>
		<div class="titlebox">
			<h3>{{ main.title }}</h3>
			<p class="p-1">{{ main.bigContent }}</p>
			<p class="p-2">{{ main.smallContent }}</p>
			<div class="price">
				<span class="sp-1" v-if="main.money">{{ main.money | money }}</span>
				<span class="sp-2" v-if="main.noMoney">{{ main.noMoney | money }}</span>
				<span class="sp-3" v-for = "(itemTip,index) in mineTips">{{ itemTip }}</span>
			</div>
		</div>
		<div class="select-address mb-10">
			<p>
				<span class="fs-14 pr-10">已选</span>
				<span>{{ main.chouse }}</span>
				<span class="iconfont icon-you fr"></span>
			</p>
			<p>
				<span class="fs-14 pr-10">送至</span>
				<span v-for="(itemadr,index) in mineAddress">{{ itemadr }}</span>
				<span class="iconfont icon-you fr"></span>
			</p>
		</div>
		<div class="sent-pj">
			<p>
				<span class="fs-14 pr-10">配件</span>
				<span></span>
				<span class="iconfont icon-you fr"></span>
			</p>
			
		</div>
		<div class="pbox">
			<img v-lazy="url" alt="" v-for="(url,index) in pbox" class="width_img">
		</div>
		<carfooter :main="main"></carfooter>
	</div>
</template>

<script>

import Swiper from '../../components/swiper/swiper'
import carFooter from '../carFooter/carFooter'
	export default{
		name:"productshow",
		data(){
			return{
				bannerlist:[],
				main:{},
				pbox : [],
				mineTips : [],
				mineAddress : [],
				money : 0,
				noMoney : 0,
			}
		},
		props:{
			json:{
				type:String,
			}
		},
		watch:{
			$route(to , from ){
				this.getData()
			}
		},
		components:{
			"swiper" : Swiper,
			"carfooter" : carFooter
		},
		mounted(){
			this.getData()

		},
		methods:{
			getData(){
				this.$http.get('../../../mishop/static/itemJson/prodshow' + this.$route.query.id + '.json').then(res => {
					//console.log(res)
					this.main = res.body;
					this.bannerlist = res.body.banner;
					this.pbox = res.body.pBox;
					this.mineTips = res.body.tips;
					this.mineAddress = res.body.address;
					//console.log(res.body.pBox[0])
					//console.log(typeof this.main.money)
				})
				//console.log(this.$route.query.id)
			}
		}
	}
</script>

<style scoped>
	#productshow{
		background-color: #eee;
		position: absolute;
		overflow-y: auto;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
	}
	.back-1{
		position: absolute;
		z-index: 9;
		top: 15px;
		left: 15px;
		background-color: #000;
		color: #fff;
		border-radius: 50%;
		padding: 8px;
		opacity: 0.6;
	}
	.npcn{
		margin-top: -4px;
	}
	.titlebox,.select-address,.sent-pj{
		background-color:#fff;
		padding: 0 20px;
	}
	.titlebox>h3{
		margin: 0;
		padding: 10px 0 5px;
	}
	.p-1{
		color: #D81718;
		font-size: 14px;
	}
	.p-2{
		font-size: 14px;
		color: #888;
	}
	.price{
		padding: 10px 0;
	}
	.sp-1{
		color: #FF6700;
		font-size: 23px;
		font-weight: bold;
	}
	.sp-2{
		color: #888;
		text-decoration: line-through;
	}
	.sp-3{
		background: #FF6700;
		font-size: 12px;
		color: #fff;
		padding: 3px;
	}
	.select-address p,.sent-pj p{
		line-height: 40px;
		font-size: 14px;
		color: #444;
	}
	.select-address p:nth-child(1){
		border-bottom: 1px solid #ccc;
	}
</style>